<extend name="CarBase"/>
<block name="body">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/Car/Calculator/jijia.css" media="all">
<script type="text/javascript" src="__PUBLIC__/js/Car/Calculator/jquery-1.8.0.min.js"></script>

<input id="hidCarID" type="hidden">
<input id="startCalUrl" type="hidden">

<div id="container">

    <!-------页签导航开始------>
    <div class="min-height">
        <div class="first-tags">
            <ul>
                <li><a id="quankuanUrl" href="{:U('Calculator/PaidInFull1')}"><span>全款计算</span></a></li>
                <li class="current"><a id="daikuanUrl" href="{:U('Calculator/Loan1')}"><span>贷款计算</span></a></li>
                <li><a id="baoxianUrl" href="{:U('Calculator/Insurance1')}"><span>保险计算</span></a></li>
            </ul>
        </div>
        <!-----页签导航结束-------->
        <div class="m_height">
            <div id="topLayer" class="top_layer">请输入裸车价格</div>
            <div class="xj-form">
                <!--<a href="" class="xj-change-city">-->
                    <!--<span>选择车款</span>-->
                    <!--<strong id="select_carname">选择车款</strong>-->
                <!--</a>-->

                <div class="xj-user-info-box">
                    <div class="xj-user-info">
                        <span>裸车价格</span>
                        <input id="luochePrice" type="number" class="current">
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $(function () {
                    $(function () {
                        $("#luochePrice").on("keyup input", function () {
                            var carPrice = $(this).val();
                            if (carPrice.length > 8) {
                                $(this).val(carPrice.substr(0, 8));
                            }
                        });
                    });
                });
            </script>
            <div class="xj-form mt15">
                <div class="xj-user-info-box jsq-user-nobg">
                    <div class="xj-user-info">
                        <span>首付比例</span>

                        <div id="shoufuDiv" class="jsq-cho-box">
                            <a href="javascript:void(0)" class="current">30%</a>
                            <a href="javascript:void(0)">40%</a>
                            <a href="javascript:void(0)">50%</a>
                            <a href="javascript:void(0)">60%</a>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    $(function () {
                        $("#shoufuDiv a").on("click", function () {
                            $("#shoufuDiv a").attr("class", "");
                            $(this).attr("class", "current");
                        });
                    });
                </script>
                <div class="xj-user-info-box jsq-user-nobg">
                    <div class="xj-user-info">
                        <span>还款年限</span>

                        <div id="yearDiv" class="jsq-cho-box jsq-cho-yaer">
                            <a href="javascript:void(0)">5</a>
                            <a href="javascript:void(0)">4</a>
                            <a href="javascript:void(0)">3</a>
                            <a href="javascript:void(0)" class="current">2</a>
                            <a href="javascript:void(0)">1</a>
                        </div>
                    </div>
                </div>


                <div class="xj-user-info-box">
                    <div class="xj-user-info">
                        <span>贷款利率</span>
                        <input id="yearRate" type="number" class="current" value="6.4">
                        <em class="baifenhao current">%</em>
                    </div>
                </div>
                <div id="loanFlag"></div>
                <div id="loanLayer" class="jump-pop" style="display: none">
                    <span>贷款上限为10%</span>
                </div>
                <script type="text/javascript">
                    $(function () {
                        $("#yearDiv a").on("click", function () {
                            $("#yearDiv a").attr("class", "");
                            $(this).attr("class", "current");
                            calcLoanValue();
                        });

                        $("#yearRate").on("keyup input", function () {
                            var loanRateValue = $(this).val();
                            if (loanRateValue.length > 6) {
                                $(this).val(loanRateValue.substr(0, 6));
                            }

                            if (parseFloat(loanRateValue) > 10) {
                                //$(".jump-pop").show();
                                //calcLoanValue();
                                //setTimeout(function () {
                                //    $(".jump-pop").hide();
                                //}, 2000);

                                var scrollTop = $(document).scrollTop();
                                var top = ($(window).height() - 200) / 2;
                                $("#loanLayer").css({ 'z-Index': 999, 'top': (top + scrollTop) + "px" }).show();
                                calcLoanValue();
                                setTimeout(function () {
                                    $("#loanLayer").hide();
                                }, 1000);
                            }
                        });
                    });

                    function calcLoanValue() {
                        var yearVal = $("#yearDiv a.current").text();
                        switch (yearVal) {
                            case "1":
                                $("#yearRate").attr("value", "6.31");
                                break;
                            case "2":
                                $("#yearRate").attr("value", "6.4");
                                break;
                            case "3":
                                $("#yearRate").attr("value", "6.4");
                                break;
                            case "4":
                                $("#yearRate").attr("value", "6.65");
                                break;
                            case "5":
                                $("#yearRate").attr("value", "6.65");
                                break;
                        }
                    }
                </script>
            </div>
            <div class="m-jsq-btn-box">
                <a id="startCal" href="javascript:void(0)" class="btn-one btn-orange">开始计算</a>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    var oldCarPrice = 0;

    $(function () {
        $("#startCal").on("click", function () {
            var luochePrice = GetIntValue($("#luochePrice").val());
            location.href = GetStartCalUrl( luochePrice);
        });

    });

    function GetStartCalUrl( paraValue) {
        var startCalUrl = [];
        startCalUrl.push("/index.php/?m=Calculator&a=Loan&carprice=" + paraValue);

        var shoufu = $("#shoufuDiv").find(".current").text().trim();
        startCalUrl.push("&shoufu=" + shoufu);
        var year = $("#yearDiv").find(".current").text().trim();
        startCalUrl.push("&year=" + year);
        var loanRate = $("#yearRate").val();
        startCalUrl.push("&loanRate=" + loanRate);
        return startCalUrl.join("");
    }

    //设置连接地址
    function setCalcToolUrl(carIdOrPrice, paraValue) {
        if (carIdOrPrice == "carPrice") {
            $("#quankuanUrl").attr("href", "/gouchejisuanqical/?carprice=" + paraValue);
            $("#daikuanUrl").attr("href", "/qichedaikuanjisuanqical/?carprice=" + paraValue);
            $("#baoxianUrl").attr("href", "/qichebaoxianjisuancal/?carprice=" + paraValue);
        } else {
            $("#quankuanUrl").attr("href", "/gouchejisuanqical/?carid=" + paraValue);
            $("#daikuanUrl").attr("href", "/qichedaikuanjisuanqical/?carid=" + paraValue);
            $("#baoxianUrl").attr("href", "/qichebaoxianjisuancal/?carid=" + paraValue);
        }

    }

    //选择车款
    function selectCarId(carId) {
        location.href = "/qichedaikuanjisuanqical/?carid=" + carId;

    }

    //格式化千位符(6701->6,701)
    function formatCurrency(num) {
        num = num.toString().replace(/\$|\,/g, '');
        if (isNaN(num)) num = "0";
        var sign = (num == (num = Math.abs(num)));
        num = Math.floor(num * 100 + 0.50000000001);
        num = Math.floor(num / 100).toString();
        for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3) ; i++)
            num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
        return (((sign) ? '' : '-') + num);
    }

    //4.784->4784
    function GetIntValue(num) {
        num = num.toString().replace(/\,/g, '');
        return parseInt(num);
    }

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
</script>

</block>